<template>
  <div class="home-container">
    <div class="header">
      <h1>AI 应用中心</h1>
      <p>选择一个AI应用开始对话</p>
    </div>
    
    <div class="apps-grid">
      <div class="app-card" @click="navigateTo('/psychologist')">
        <div class="card-icon psychologist">
          <img :src="psychologistAvatar" alt="心理咨询师头像" class="avatar" />
        </div>
        <h2>心理咨询师</h2>
        <p>专业心理支持与情感陪伴</p>
      </div>
      
      <div class="app-card" @click="navigateTo('/super-agent')">
        <div class="card-icon super-agent">
          <img :src="superAgentAvatar" alt="超级智能体头像" class="avatar" />
        </div>
        <h2>超级智能体</h2>
        <p>多功能AI助手，解决各类问题</p>
      </div>
    </div>
    
    <footer class="footer">
      <div class="footer-content">
        <p>&copy; 2025 sicaua509. 保留所有权利。</p>
        <div class="footer-links">
          <a href="#" @click.prevent="showPrivacyPolicy">隐私政策</a>
          <a href="#" @click.prevent="showTermsOfService">用户协议</a>
        </div>
      </div>
    </footer>
    
    <!-- 隐私政策弹窗 -->
    <div v-if="showPrivacyModal" class="modal" @click="showPrivacyModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>隐私政策</h2>
          <button class="close-button" @click="showPrivacyModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <h3>信息收集</h3>
          <p>我们收集您在使用AI应用中心时提供的信息，包括但不限于您输入的文本内容、设备信息和使用数据。</p>
          
          <h3>信息使用</h3>
          <p>我们使用收集的信息来提供、维护和改进我们的服务，以及保护用户和我们的合法权益。</p>
          
          <h3>信息保护</h3>
          <p>我们采取适当的安全措施来保护您的个人信息，防止未经授权的访问、使用或泄露。</p>
          
          <h3>信息共享</h3>
          <p>我们不会将您的个人信息出售给第三方。仅在法律要求或为提供服务所必需时才会共享信息。</p>
          
          <h3>您的权利</h3>
          <p>您有权访问、更正或删除您的个人信息，以及撤回同意或限制处理您的个人信息。</p>
          
          <h3>联系我们</h3>
          <p>如果您对本隐私政策有任何疑问，请通过sicaua509@example.com与我们联系。</p>
        </div>
      </div>
    </div>
    
    <!-- 用户协议弹窗 -->
    <div v-if="showTermsModal" class="modal" @click="showTermsModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>用户协议</h2>
          <button class="close-button" @click="showTermsModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <h3>接受条款</h3>
          <p>通过使用AI应用中心，您同意遵守本用户协议的所有条款和条件。</p>
          
          <h3>服务描述</h3>
          <p>AI应用中心提供基于人工智能的对话服务，包括心理咨询师和超级智能体功能。</p>
          
          <h3>用户责任</h3>
          <p>您同意在使用服务时不从事任何违法或有害活动，并对您使用服务的行为负责。</p>
          
          <h3>知识产权</h3>
          <p>AI应用中心及其所有内容、功能和特性均为sicaua509或其许可方的知识产权。</p>
          
          <h3>免责声明</h3>
          <p>服务按"现状"提供，不提供任何明示或暗示的保证。我们不对服务的可用性或准确性承担责任。</p>
          
          <h3>责任限制</h3>
          <p>在法律允许的最大范围内，sicaua509不对任何间接、附带、特殊或后果性损害承担责任。</p>
          
          <h3>修改条款</h3>
          <p>我们保留随时修改本协议的权利。修改后的协议将在网站上发布后立即生效。</p>
          
          <h3>联系我们</h3>
          <p>如果您对本用户协议有任何疑问，请通过sicaua509@example.com与我们联系。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import psychologistAvatar from '../assets/psychologist-avatar.svg'
import superAgentAvatar from '../assets/superagent-avatar.svg'

const router = useRouter()
const showPrivacyModal = ref(false)
const showTermsModal = ref(false)

const navigateTo = (path) => {
  router.push(path)
}

const showPrivacyPolicy = () => {
  showPrivacyModal.value = true
}

const showTermsOfService = () => {
  showTermsModal.value = true
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 2rem;
}

.header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.header p {
  font-size: 1.1rem;
  color: #666;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
  flex: 1;
  align-items: center;
}

.app-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.card-icon.psychologist {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #4a90e2;
}

.card-icon.super-agent {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #ff8c6b;
}

.app-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.app-card p {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .home-container {
    padding: 1rem;
  }
  
  .header h1 {
    font-size: 2rem;
  }
  
  .apps-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .app-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .home-container {
    padding: 0.5rem;
  }
  
  .header {
    margin-bottom: 2rem;
    margin-top: 1rem;
  }
  
  .header h1 {
    font-size: 1.8rem;
  }
  
  .apps-grid {
    gap: 1rem;
  }
  
  .app-card {
    padding: 1.2rem;
  }
  
  .card-icon {
    width: 80px;
    height: 80px;
  }
}

.footer {
  margin-top: auto;
  padding: 2rem 0 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-content p {
  margin-bottom: 0.5rem;
}

.footer-links {
  margin-top: 0.5rem;
}

.footer-links a {
  color: #4A90E2;
  text-decoration: none;
  margin: 0 0.5rem;
  cursor: pointer;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  background-color: rgba(74, 144, 226, 0.1);
  text-decoration: none;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 15px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 15px 15px 0 0;
}

.modal-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.8rem;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-weight: normal;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
  transform: rotate(90deg);
}

.modal-body {
  padding: 2rem;
}

.modal-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  color: #2c3e50;
  font-size: 1.3rem;
  font-weight: 600;
}

.modal-body p {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  color: #34495e;
  font-size: 1rem;
}

.modal-body ul {
  margin-bottom: 1.2rem;
  padding-left: 1.8rem;
}

.modal-body li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
  color: #34495e;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>